<!DOCTYPE html>

<!--
/*
* Copyright 2017 SideeX committers
*
*  Licensed under the Apache License, Version 2.0 (the "License");
*  you may not use this file except in compliance with the License.
*  You may obtain a copy of the License at
*
*      http://www.apache.org/licenses/LICENSE-2.0
*
*  Unless required by applicable law or agreed to in writing, software
*  distributed under the License is distributed on an "AS IS" BASIS,
*  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
*  See the License for the specific language governing permissions and
*  limitations under the License.
*
*/
-->

<html lang="en">

<head>
    <meta charset="utf-8" />
    <!-- TODO: Change the title bar text -->
    <title>SideeX</title>
    <link rel="stylesheet" href="css/jquery-ui.min.css">
    <link rel="stylesheet" href="css/jquery-ui-slider-pips.css">
    <link rel="stylesheet" href="css/layout.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <!-- to hide right button feature -->
    <!--[if lt IE 9]>
    <link rel="stylesheet" href="panel/css/ie.css" type="text/css" media="screen" />
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <script type="text/javascript" src="js/lib/utils.js"></script>
    <script type="text/javascript" src="../common/jquery-3.4.1.min.js"></script>
    <script type="text/javascript" src="js/lib/jquery-ui.min.js"></script>
    <script type="text/javascript" src="js/lib/jquery-ui-slider-pips.js"></script>
    <script type="text/javascript" src="js/UI/hideshow.js"></script>
    <script type="text/javascript" src="js/lib/jquery.tablesorter.min.js"></script>
    <script type="text/javascript" src="js/lib/jquery.equalHeight.js"></script>
    <script type="text/javascript" src="js/lib/jquery.tabletab.js"></script>
    <script type="text/javascript" src="js/lib/colResizable-1.5.min.js"></script>
    <script type="text/javascript" src="js/UI/panelSetting.js"></script>
    <script type="text/javascript" src="js/UI/sortable-ui.js"></script>
    <script type="text/javascript" src="js/background/doc.js"></script>
</head>
<!-- TODO: Make whole panel size flexible -->

<body>
    <header id="header">
        <hgroup>
            <img class="logo_img" src="../icons/logo.png"></img>
            <a href="#"><img id="help" class="toolBar_img" src="../icons/help.png"></img></a>
        </hgroup>
    </header>
    <!-- end of header bar -->
    <!-- right button feature -->
    <div id="suite-grid-menu" class="menu">
        <ul>
            <li id="load-testSuite-show-menu"><a href="#">Open Test Suites</a></li>
            <li id="add-testSuite-menu"><a href="#">Add New Test Suite</a></li>
        </ul>
    </div>
    <div id="command-grid-menu" class="menu">
        <ul>
            <li id="grid-add"><a href="#">Add Command <span class="hotKey">Ctrl+I</span></a></li>
            <li id="grid-delete"><a href="#">Delete Command <span class="hotKey">Del</span></a></li>
            <li id="grid-deleteAll"><a href="#">Delete All Commands</a></li>
            <li id="grid-copy"><a href="#">Copy Command <span class="hotKey">Ctrl+C</span></a></li>
            <li id="grid-paste"><a href="#">Paste Command <span class="hotKey">Ctrl+V</span></a></li>
            <li id="grid-breakpoint"><a href="#">Toggle Breakpoint </a><span class="hotKey">Ctrl+B</span></li>
        </ul>
    </div>
    <section id="main" class="column">
        <div id="toolbar-container" class="submit_link">
            <!-- hidden, because it has default style -->
            <input id="load-testSuite-hidden" type="file" multiple accept="text/*" style="display: none"></input>
            <input id="load-older-testSuite" type="file" multiple accept="text/*" style="display: none">
            <input id="load-testSuite-show" type="button" value="OpenSuite" style="display: none"></input>
            <button id="save-testSuite" style="display: none">SaveSuite</button>
            <button id="close-testSuite" style="display: none">CloseSuite</button>
            <button id="add-testSuite" style="display: none">+Suite</button>
            <button id="add-testCase" style="display: none">+Case</button>
            <button id="delete-testCase" style="display: none">-Case</button>
            <a download="info.html" id="downloadlink" style="display: none">Download</a>
            <button id="record" class="sub_btn" style="width: 15%"><i class="fa fa-video-camera" aria-hidden="true"></i> Record</button>
            <button id="playback" class="sub_btn" style="width: 20%" disabled><i class="fa fa-play" aria-hidden="true"></i> <u>P</u>layThisCase</button>
            <button id="stop" class="sub_btn" style="display: none; width: 20%"><i class="fa fa-stop" aria-hidden="true"></i> Stop</button>
            <button id="playSuite" class="sub_btn" style="width: 21%" disabled><i class="fa fa-cube" aria-hidden="true"></i> PlayThisSuite</button>
            <button id="playSuites" class="sub_btn" style="width: 21%" disabled><i class="fa fa-cubes" aria-hidden="true"></i> PlayAllSuites</button>
            <button id="pause" class="sub_btn btn_pr" style="width: 15.5%" disabled><i class="fa fa-pause-circle" aria-hidden="true"></i> Pause</button>
            <button id="resume" class="sub_btn btn_pr" style="display: none; width: 15.5%"><i class="fa fa-reply" aria-hidden="true"></i> Resume</button>
            <!-- TODO: Add a stop button -->
        </div>
        <!-- load Suite of older version -->
        <!--<div id="loadSuiteOfOlderVersion" title="Alert">
            Please open test case!
            <input id="testSuiteOpener" type="file" multiple accept="text/*">
        </div>-->
        <div class="module_all">
            <article class="width_quarter module_right">
                <div id="slider"></div>
                <div id="middle-container" class="module">
                    <header>
                        <h3 class="suite-container-title">
                            <div class="suite-container-title">Test Suites</div>
                            <div id="suite-fun" class="suite-fun">
                                <div id="suite-open" class="suite-open"><i id="suite-open-icon" class="fa fa-folder-open-o suite-open" aria-hidden="true"></i></div>
                                <div id="suite-plus" class="suite-plus"><i id="suite-plus-icon" class="fa fa-plus suite-plus" aria-hidden="true"></i></div>
                            </div>
                        </h3>
                    </header>
                    <div id="testCase-container" class="case_list">
                        <!-- Sug: Add animation when dragdrop -->
                        <div id="testCase-grid" class="module_content">
                        </div>
                    </div>
                </div>
                <!-- end of messages article -->
                <article id="result-container" class="module">
                    <div class="fieldset">
                        <div class="result-row">
                            <label id="result1">Runs</label>
                            <p id="result-runs" class="runs">0</p>
                        </div>
                        <div class="result-row">
                            <label id="result2">Failures</label>
                            <p id="result-failures" class="failures">0</p>
                        </div>
                    </div>
                </article>
            </article>
            <article class="module width_3_quarter">
                <div id="command-container" class="tab_content case_hight">
                    <div class="smallSection">
                        <table id="command-grid" class="tablesorter" cellspacing="0">
                            <thead class="fixed">
                                <tr>
                                    <th style="width: 23%">Command<div class="border"></div></th>
                                    <th style="width: 40%">Target<div class="border"></div></th>
                                    <th style="width: 37%">Value</th>
                                </tr>
                            </thead>
                            <tbody id="records-grid">
                                <input id="records-count" type="hidden" value="0">
                                </input>
                                
                                <!-- set input and /tbody in same line to avoid textNode -->
                                <!--<tr>
                                    <td>time</td>
                                    <td>open</td>
                                    <td>1</td>
                                </tr>
                                <tr>
                                    <td>time</td>
                                    <td>open</td>
                                    <td>2</td>
                                </tr>
                                <tr>
                                    <td>time</td>
                                    <td>open</td>
                                    <td>3</td>
                                </tr>
                                <tr>
                                    <td>time</td>
                                    <td>open</td>
                                    <td>4</td>
                                </tr>
                                <tr>
                                    <td>time</td>
                                    <td>open</td>
                                    <td>5</td>
                                </tr>
                                <tr>
                                    <td>time</td>
                                    <td>open</td>
                                    <td>6</td>
                                </tr>
                                <tr>
                                    <td>time</td>
                                    <td>open</td>
                                    <td>7</td>
                                </tr>
                                <tr>
                                    <td>time</td>
                                    <td>open</td>
                                    <td>8</td>
                                </tr>
                                <tr>
                                    <td>time</td>
                                    <td>open</td>
                                    <td>9</td>
                                </tr>
                                <tr>
                                    <td>time</td>
                                    <td>open</td>
                                    <td>10</td>
                                </tr>
                                <tr>
                                    <td>time</td>
                                    <td>open</td>
                                    <td>11</td>
                                </tr>
                                <tr>
                                    <td>time</td>
                                    <td>open</td>
                                    <td>12</td>
                                </tr>-->
                            </tbody>
                        </table>
                        <div class="record-bottom"></div>
                    </div>
                </div>
                <div id="command-toolbar">
                    <div class="fieldset">
                        <!-- TODO: make (command &) target selectable -->
                        <div class="command-row">
                            <label>Command</label>
                            <input id="command-command" list="command-command-list" type="text"><i id="command-" class="fa fa-chevron-down" aria-hidden="true"></i>
                            <div id="command-dropdown" class="w3-dropdown-content w3-bar-block">
                            </div>
                        </div>
                        <datalist id="command-command-list">
                        </datalist>
                        <div class="command-row">
                            <label>Target</label>
                            <input id="command-target" list="command-target-list" type="text"><i id="target-" class="fa fa-chevron-down" aria-hidden="true"></i>
                            <div id="target-dropdown" class="w3-dropdown-content w3-bar-block">
                            </div>
                            <button id="selectElementButton" class="btn_sf" style="width: 60px">Select</button>
                            <button id="showElementButton" class="btn_sf" style="width: 50px">Find</button>
                        </div>
                        <datalist id="command-target-list">
                        </datalist>
                        <div class="command-row">
                            <label>Value</label>
                            <input id="command-value" type="text">
                        </div>
                    </div>
                </div>
                <!-- end of #command-container -->
            </article>
            <!-- end of content manager article -->
            <div class="clear"></div>
            <article class="module width_full">
                <header class="tabs_involved">
                    <ul class="tabs2"> 
                    <li id="history-log"><a>Log</a></li>
                    <li id="reference-log"><a>Reference</a></li>
                    </ul>
                    <ul class="tabs">
                        <li id="save-log"><a>Save</a></li>
                        <li id="clear-log"><a>Clear</a></li>
                    </ul>
                    
                </header>
                <div id="tab4" class="tab_content case_roll">
                    <div class="module_content">
                        <div id="logcontainer">
                        </div>
                        <div id="refercontainer">
                        </div>
                    </div>
                </div>
                <!-- end of #tab4 -->
            </article>
            <!-- end of styles article -->
        </div>
        <!--<div class="spacer"></div>-->
    </section>
    <!-- script -->
    <script src="../common/browser-polyfill.js"></script>
    <script src="js/IO/inputFileTransformer.js"></script>
    <script src="js/IO/load_file.js"></script>
    <script src="js/IO/save_file.js"></script>
    <script src="js/UI/context_menu.js"></script>
    <script src="js/UI/command_grid.js"></script>
    <script src="js/UI/command_grid_toolbar.js"></script>
    <script src="js/UI/testcase_grid.js"></script>
    <script src="js/UI/log.js"></script>
    <script src="js/background/window-controller.js"></script>
    <script src="js/background/recorder.js"></script>
    <script src="js/background/initial.js"></script>
    <script src="../common/escape.js"></script>
    <script src="js/background/editor.js"></script>
    <script src="js/background/formatCommand.js"></script>
    <script src="js/background/playback.js"></script>
</body>

</html>
